<template>
  <div class="mini-mask">
    <Transition name="mask">
      <div class="toast-mask" v-show="isShowError">{{ errorMsg }}</div>
    </Transition>
    <div class="mini-content-wp" :style="{ backgroundImage: `url(${imgUrl1}),url(${imgUrl2})` }">
      <!--登录页面的“x”按钮-->
      <div class="mini-close-icon" @click="$store.commit('changeLogView')"></div>
      <div class="scan-wp">
        <div class="scan-title">扫码下载APP</div>
        <div class="scan-box">
          <img alt="Scan me!"
               src="">
          <div class="login-icon"></div>
        </div>
        <div class="scan-desc">
          <p> 请使用 <a :href="baseUrl + 'download'" target="_blank" style="color: #00aeec;">哔哩哔哩客户端</a></p>
          <p>或扫描上方二维码下载APP</p>
        </div>
        <!-- <div class="scan-tips-icon"></div> -->
      </div>
      <div class="mini-line"></div>
      <div class="login-right-wp">
        <div class="login-tab-wp">
          <div class="login-tab-item" :class="isLogView ? 'active-tab' : ''" @click="isLogView = true"> 登录</div>
          <div class="login-tab-line"></div>
          <div class="login-tab-item" :class="isLogView ? '' : 'active-tab'" @click="regView"> 注册</div>
        </div>
        <div v-if="isLogView">
          <div class="tab-form form-log">
            <div class="form-item">
              <span>账号</span>
              <input autocomplete="on" maxlength="20" oninput="value=value.replace(/\s+/g, '')"
                     v-model="userInfo.username" @change="changeLogBtnAble" placeholder="请输入账号" type="text">
            </div>
            <div class="separator-line"></div>
            <div class="form-item">
              <span>密码</span>
              <input autocomplete="on" maxlength="40" oninput="value=value.replace(/\s+/g, '')"
                     v-model="userInfo.password" @change="changeLogBtnAble" @blur="pasInputBlur" @focus="pasInputFocus"
                     placeholder="请输入密码" type="password">
            </div>
            <div class="separator-line"></div>
            <div class="form-item">
              <span>验证</span>
              <input v-model="userInfo.captcha" @change="valCaptcha" placeholder="输入右侧图片的计算结果" type="text">
              <span class="captcha-change link-word" @click="getCaptcha">换一张</span>
              <div v-if="captchaSvg === ''" class="captcha-svg" v-html="captchaIf"></div>
              <img v-else style="width:100px;height:40px" class="captcha-svg"
                   :src="'data:image/png;base64,'+captchaSvg"/>
            </div>
          </div>
          <div class="btn-wp">
            <slotRegLogBtn :class="btnLogAbled ? '' : 'disabled'" @click="login">登录</slotRegLogBtn>
          </div>
          <div class="login-sns-wp">
            <span>其他方式登录</span>
            <div class="login-sns-content">
              <div class="login-sns-item"><img
                  src=""
                  class="login-sns-item-icon"><span class="login-sns-name">微信登录</span></div>
              <div class="login-sns-item"><img
                  src=""
                  class="login-sns-item-icon"><span class="login-sns-name">微博登录</span></div>
              <div class="login-sns-item"><img
                  src=""
                  class="login-sns-item-icon"><span class="login-sns-name">QQ登录</span></div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="tab-form form-reg">
            <div class="form-item">
              <span>账号</span>
              <input autocomplete="on" maxlength="20" oninput="value=value.replace(/\s+/g, '')"
                     v-model="userInfo.username" @change="valUsername" placeholder="请输入账号" type="text">
            </div>
            <div class="separator-line"></div>
            <div class="form-item">
              <span>密码</span>
              <input autocomplete="on" maxlength="40" oninput="value=value.replace(/\s+/g, '')" @blur="pasInputBlur"
                     @focus="pasInputFocus"
                     v-model="userInfo.password" @change="valPsd" placeholder="至少6位密码，区分大小写" type="password">
            </div>
            <div class="separator-line"></div>
            <div class="form-item">
              <span>密码</span>
              <input autocomplete="on" maxlength="40" oninput="value=value.replace(/\s+/g, '')" @blur="pasInputBlur"
                     @focus="pasInputFocus"
                     v-model="userInfo.passwordAgain" @change="valPsdAgain" placeholder="再次输入密码" type="password">
            </div>
            <div class="separator-line"></div>
            <div class="form-item">
              <span>验证</span>
              <input v-model="userInfo.captcha" @change="valCaptcha" placeholder="输入右侧图片的计算结果" type="text">
              <span class="captcha-change link-word" @click="getCaptcha">换一张</span>
              <div v-if="captchaSvg === ''" class="captcha-svg" v-html="captchaIf"></div>
              <img v-else style="width:100px;height:40px" class="captcha-svg"
                   :src="'data:image/png;base64,'+captchaSvg"/>
            </div>
          </div>
          <div class="btn-wp">
            <slotRegLogBtn @click="clickRegister">注册</slotRegLogBtn>
          </div>
        </div>
      </div>
      <div class="login-agreement-wp">
        <p> 首次使用请先注册</p>
        <p> 登录或完成注册即代表你同意 <span class="link-word">用户协议</span> 和 <span class="link-word">隐私政策</span></p>
      </div>

    </div>
  </div>
</template>

<script>
import slotRegLogBtn from './btn/slotRegLogBtn.vue';

export default {
  /**登录页组件*/
  name: 'logReg',
  components: {
    slotRegLogBtn
  },
  data() {
    return {
      baseUrl: '/blank/',
      isLogView: true,
      userInfo: {
        username: '',
        password: '',
        passwordAgain: '',
        captcha: ''
      },
      isShowError: false,
      errorMsg: '',
      btnLogAbled: false,
      btnRegAbled: false,
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      //获取验证码失败
      captchaIf: `<svg width="100" height="40"><rect width="100%" height="100%" fill="#ccc" /></svg>`,
      //获取验证码成功
      captchaSvg: "",
      uuid: '',
      //输入密码改变背景
      imgUrl1: '',
      imgUrl2: ''
    }
  },
  created() {
    // 登录组件出现时
    this.getCaptcha()
    this.inputBlur()
  },
  methods: {
    async getCaptcha() {

      // let res = await this.$util.get('users/getCaptcha')

      let res = await this.$util.get('captchaImage')
      if (res.code != 200) {
        this.showErrorMsg('验证码获取失败，请重试')
        return
      }
      this.uuid = res.uuid
      this.captchaSvg = res.img
    },
    // 重新获取验证码
    regView() {
      this.isLogView = false
      this.getCaptcha()
    },
    // 显示信息
    showErrorMsg(msg) {
      this.errorMsg = msg
      this.isShowError = true
      setTimeout(() => {
        this.isShowError = false
      }, 2000)
    },
    /**密码框失去焦点*/
    pasInputBlur() {
      this.inputBlur()
    },
    /**复用方法*/
    inputBlur() {
      this.imgUrl1 = 'https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png'
      this.imgUrl2 = 'https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png'
    },
    /**密码框获得焦点*/
    pasInputFocus() {
      this.imgUrl1 = 'https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_close.9382a5a8.png'
      this.imgUrl2 = 'https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_close.a8c18fc8.png'
    },
    changeLogBtnAble() {
      if (this.userInfo.username.length > 0 && this.userInfo.password.length > 0) {
        this.btnLogAbled = true
      } else {
        this.btnLogAbled = false
      }
    },
    changeRegBtnAble() {
      if (this.flag1 && this.flag2 && this.flag3 && this.flag4) {
        this.btnRegAbled = true
      } else {
        this.btnRegAbled = false
      }
    },
    valUsername() {
      if (this.userInfo.username.length < 6 || this.userInfo.username.length > 20) {
        this.showErrorMsg('用户名长度应位于6-20位之间')
        this.flag1 = false
      } else {
        this.flag1 = true
      }
      this.changeRegBtnAble()
    },
    valPsd() {
      if (this.userInfo.password.length < 6 || this.userInfo.password.length > 40) {
        this.showErrorMsg('密码长度应位于6-40位之间')
        this.flag2 = false
      } else {
        this.flag2 = true
      }
      this.changeRegBtnAble()
    },
    valPsdAgain() {
      if (this.userInfo.password != this.userInfo.passwordAgain) {
        this.showErrorMsg('两次输入的密码不一致')
        this.flag3 = false
        return
      } else {
        this.flag3 = true
      }
      this.valPsd()
    },
    valCaptcha() {
      if (!this.userInfo.captcha) {
        this.showErrorMsg('验证码不能为空')
        this.flag4 = false
        return
      } else {
        this.flag4 = true
      }
      this.changeRegBtnAble()
    },
    loginSuccess(res) {
      console.log('loginSuccess', res);
      // 写入用户信息
      this.$store.commit('setUser', res.data)
      // 存储用户信息
      res.data.token = res.token
     localStorage.setItem('userInfo', JSON.stringify(res.data))
      this.$store.commit('changeLogView')
      location.reload()
    },
    /**登录*/
    async login() {
      let res = await this.$util.post('login', {
        username: this.userInfo.username,
        password: this.userInfo.password,
        code: this.userInfo.captcha,
        uuid: this.uuid
      })
      if (res.code == 200) {
        // 登录成功
        this.loginSuccess(res)

        if (this.$route.name === 'detail') {
          this.$bus.emit('shuaxing', res.code)
          this.$bus.emit('changeCommentOneByLogin')
        }

      } else {
        // 登录失败
        this.showErrorMsg(res.msg)
        // 失败刷新验证码
        this.getCaptcha()
      }
    },
    clickRegister(){
      if(this.btnRegAbled != true){
        this.valUsername()
        this.valPsd()
        this.valPsdAgain()
        this.valCaptcha()
        return
      }
      this.register()
    },

    async register() {
      let res = await this.$util.post('register', {
        username: this.userInfo.username,
        password: this.userInfo.password,
        code: this.userInfo.captcha,
        uuid: this.uuid
      })
      if (res.code == 200) {
        // 注册成功
        this.showErrorMsg('注册成功')
        setTimeout(() => {
          this.isLogView = true
        }, 2000)
        this.changeLogBtnAble()
      } else {
        this.showErrorMsg(res.msg)
      }
    }
  }
}

</script>

<style scoped>
.mini-mask {
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 10010;
  align-items: center;
  justify-content: center;
}

.toast-mask {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  background: rgba(51, 51, 51, .8);
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
  color: #fff;
}

.mini-content-wp {
  width: 820px;
  height: 430px;
  background: #fff;
  border-radius: 8px;
  padding: 52px 65px 29px 10px;
  /*登录页左右下角图片*/
  background-image: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_open.4ea5f239.png),
  url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_open.f7d7f655.png);
  /*
  https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/22_close.9382a5a8.png
  https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/33_close.a8c18fc8.png
  */
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: 14%;
  position: relative;
  display: flex;
  justify-content: center;
}

.mini-close-icon {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 20px;
  right: 20px;
  /*登录页右上角X*/
  background: url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/close.a35a1809.svg) no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 2;
}

.scan-wp {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.mini-line {
  position: relative;
  width: 1px;
  flex: none;
  height: 228px;
  background-color: #e3e5e7;
  margin: 43px 44px 0 45px;
  z-index: 1;
  border-radius: 8px;
}

/* .scan-tips-icon {
    height: 173px;
    width: 100%;
    background: #fff url(https://s1.hdslb.com/bfs/seed/jinkela/short/mini-login-v2/img/qr-tips.74063ae1.png) no-repeat;
    background-size: 100% 100%;
} */

.scan-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 16px;
  color: #505050;
  margin-bottom: 26px;
}

.scan-box {
  position: relative;
  width: 173px;
  height: 173px;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
}

.scan-desc {
  margin-top: 18px;
  font-size: 13px;
  line-height: 19px;
  text-align: center;
  color: #505050;
}

.login-icon {
  position: absolute;
  width: 34px;
  height: 34px;
  background: #fff url() no-repeat;
  background-size: 100% 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid #fff;
  border-radius: 8px;
}

.login-right-wp {
  width: 400px;
  margin-bottom: 74px;
  display: flex;
  flex-direction: column;
}


.login-tab-wp {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.login-tab-item {
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  color: #505050;
  cursor: pointer;
}

.active-tab {
  color: #4fa5d9;
  cursor: not-allowed;
}

.login-tab-line {
  width: 1px;
  height: 20px;
  background: #e3e5e7;
  margin: 0 21px;
}

.tab-form {
  width: 400px;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #212121;
}

.from-log {
  height: 90px;
}

.from-reg {
  height: 180px;
}

.form-item {
  position: relative;
  display: flex;
  width: 100%;
  height: 44px;
  padding: 12px 20px;
}

/*.form-item img{
  height: 39px;
  width: 24px;
}*/

.captcha-change {
  margin-right: 90px;
  font-size: 12px;
}

.captcha-svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


.form-item input {
  flex: 1;
  margin-left: 20px;
}

.separator-line {
  width: 100%;
  height: 0;
  border-bottom: 1px solid #e3e5e7;
}

.btn-wp {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  width: 400px;
  text-align: center;
}

.login-sns-wp {
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #9499a0;
  font-size: 13px;
}

.login-sns-content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.login-sns-item {
  margin-right: 30px;
  cursor: pointer;
}

.login-sns-item-icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}

.login-agreement-wp {
  width: 351px;
  position: absolute;
  bottom: 29px;
  left: 50%;
  transform: translate(-50%);
  color: #999;
  font-size: 13px;
  text-align: center;
}

.link-word {
  color: #00a1d6;
  cursor: pointer;
}

.mask-enter-from,
.mask-leave-to {
  opacity: 0;
}

.mask-enter-to,
.mask-leave-from {
  opacity: 1;
}

.mask-enter-active,
.mask-leave-active {
  transition: all 0.3s;
}
</style>
